<!DOCTYPE >
<html>

<head>
    <meta charset="utf-8">
    <title> 期末作业</title>
    <link rel="stylesheet" type="text/css" href="NewLogin.css" />
    <link rel="stylesheet" type="text/css" href="font-awesome.css" />
</head>
<style>
    body {
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: top right;
        background-color: link;
        color: black;
        background-attachment: fixed;
        margin: 0 auto;
        perspective: 500px;
        left: 50px;
    }
    
    .body {
        width: 600px;
        margin: 0 auto;
        position: relative;
        left: 50%;
        margin-left: -300px;
        top: -50px;
    }
    
    h1 {
        background-repeat: no-repeat;
    }
    
    h2 {
        color: #eb366e;
        font-size: large;
    }
    
    a {
        font-size: 25px;
        text-decoration: none
    }
    
    a:visited {
        color: brown;
    }
    
    a:active {
        color: crimson;
    }
    
    a img:hover {
        border: 5px solid rebeccapurple;
        width: 300px;
    }
    
    a:hover {
        letter-spacing: 5px;
        text-decoration: underline;
        color: cornflowerblue;
    }
    
    img {
        height: 500px;
    }
    
    .red {
        font-family: "微软雅黑";
        color: tomato;
        font-size: 20px;
    }
    
    .big {
        color: cornflowerblue;
        font-size: 25px;
    }
    
    .cat {
        color: black;
        font-family: "微软雅黑";
        font-size: large;
        display: block;
        margin: 100px auto;
        transition: all 1s;
    }
    
    img:hover {
        background-image: url(D:\图片\背景图9.jpg);
        transform: rotateX(180deg);
    }
    
    ol li span {
        color: #999999;
    }
    
    table,
    th,
    td {
        border: 1px solid gray;
        border-collapse: collapse;
        color: #202020;
    }
    
    table th {
        background-color: #eeeeee;
    }
    
    table tr td {
        width: 500px;
        text-align: center;
    }
    
    .box {
        width: 500px;
        height: 200px;
        background: -webkit-linear-gradient(left, orange, pink, gold);
        background-color: blue;
        font-size: large;
        margin: 0 auto;
        position: relative;
        margin-left: -70px;
    }
    
    .box1 {
        font-size: large;
    }
    
    .box2 {
        width: 0;
        height: 0;
        /*border: 10px solid pink; */
        border-top: 10px solid pink;
        border-right: 10px solid red;
        border-bottom: 10px solid blue;
        border-left: 10px solid green;
        right: 100px;
        position: relative;
        margin: 0 auto;
        margin-left: 240px;
    }
</style>

<body>
    <div id="login_box">
        <h2> LOGIN</h2>
        <div id="form">
            <div id="input_box">
                <i class="fas fa-user"></i>
                <input type="text" placeholder="Username">
            </div>
            <div id="input_box">
                <i class="fas fa-lock"></i>
                <input type="password" placeholder="Password">
            </div>
        </div>
        <button>Sign in</button>
        <div id="sign-in">
            <a href="#">水平有限，多多包涵</a>
        </div>
        <h1 class="red">雷勇敢</h1>
        <div class="body"><img src="背景图9.jpg" width="600" height="200">
        </div>
        <p class="cat">雷勇敢 年龄 20 一个充满热情的眼睛宅</p>
        <a class="big" href="#gerenaihao">个人爱好</a>
        <a class="big" href="#weilaimengxiang">未来梦想</a>

        <a class="big" href="#xinggetedian">性格特点</a>

        <h2 id="gerenaihao">个人爱好</h2>
        <p class="cat"><img src="背景图4.jpg">
            <img src="背景图5.jpg">
            <img src="背景图6.jpg">
            <img src="背景图7.jpg">
            <a href="https://huoying.qq.com/">火影永远滴神
			</a><br>喜欢看动漫，喜欢冒险、</p>
        <h2 id="weilaimengxiang">未来梦想</h2>
        <div class="box2"></div>
        <div class="box">世界和平、没有战争、没有饥饿、国家富强</div>
        <p class="cat"></p>
        </a>


        <h2 id="xinggetedian ">性格特点</h2>
        <div class="box1">冷静、沉着，时而幽默、时而愤慨</div>
        </a>
        <h2 id="zuopin">作品</h2>
        <div class="box3">
            <img src="背景图10.jpg">
            <img src="背景图11.jpg">
            <img src="背景图12.jpg">

            <a href="http://music.163.com/song?id=536713076&userid=1679946962">异域风情music</a>

        </div>
    </div>




    </div>
</body>

</html>